<script setup lang="ts">
import VDialog from "@/components/VDialog/VDialog.vue";
import {computed, onBeforeUnmount, ref, shallowRef} from "vue";
import { ReformMainPageResponse } from "@/api/airport/reform/reformMain";
import { ElMessage } from "element-plus";

// 导入 Editor 组件和样式
import { Editor } from "@wangeditor/editor-for-vue";
import '@wangeditor/editor/dist/css/style.css';
import {
  viewEditorConfig,
} from "@/api/airport/inspection/inspection";


interface Props {
  modelValue: boolean;
  row?: ReformMainPageResponse;
}

const props = defineProps<Props>();
const emits = defineEmits<{
  (e: "update:modelValue", v: boolean): void;
}>();

const visible = computed({
  get: () => props.modelValue,
  set(v) {
    emits("update:modelValue", v);
  }
});

// 定义计算属性来安全地绑定表单字段
const code = computed(() => props.row?.code || '');
const questionSourceName = computed(() => props.row?.questionSourceName || '');
const inspectors = computed(() => props.row?.inspectors || '');
const questionTitle = computed(() => props.row?.questionTitle || '');
const reformStatus = computed(() => {
  const statusMap = {
    '1': '措施已制定待审核',
    '2': '措施审核通过执行中',
    '3': '措施审核不通过',
    '4': '整改效果审核通过',
    '5': '未分析原因制定措施',
    '6': '整改效果审核不通过'
  };
  return statusMap[props.row?.reformStatus || ''] || '未知状态';
});
const issueDeptName = computed(() => props.row?.issueDeptName || '');
const dutyDeptName = computed(() => props.row?.dutyDeptName || '');
const checkDate = computed(() => props.row?.checkDate || '');



// Editor 相关配置
const viewEditorRef = shallowRef();

const handleEditorCreated = (editor) => {
  viewEditorRef.value = editor;
};

// 组件销毁时销毁编辑器
onBeforeUnmount(() => {
  const editor = viewEditorRef.value;
  if (editor == null) return;
  editor.destroy();
});
</script>
<template>
  <v-dialog
    show-full-screen
    :fixed-body-height="false"
    use-body-scrolling
    title="整改通知书详情"
    v-model="visible"
    @cancel="visible = false"
  >
    <el-form :model="props.row" label-width="140px">
      <!-- 使用 el-row 和 el-col 使每行展示两个项 -->
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="整改通知书编号：">
            <span>{{ code }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="检查人员：">
            <span>{{ inspectors }}</span>
          </el-form-item>
        </el-col>
      </el-row>


      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="当前状态：">
            <span>{{ reformStatus }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="督察部门：">
            <span>{{ issueDeptName }}</span>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="责任部门：">
            <span>{{ dutyDeptName }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="检查日期：">
            <span>{{ checkDate }}</span>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="24">
          <el-form-item label="整改内容：">
            <span>{{ questionTitle }}</span>
          </el-form-item>
        </el-col>
      </el-row>


      <!-- 问题详情 Editor 组件 -->
      <el-row :gutter="20">
        <el-col :span="24">
          <el-form-item label="问题详情：">
            <div class="editor-container">
              <Editor
                class="editor"
                :model-value="props.row?.problemDetail || '无'"
                :defaultConfig="viewEditorConfig"
                mode="default"
                @onCreated="handleEditorCreated"
              />
            </div>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </v-dialog>
</template>


<style scoped>
.editor-container {
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  overflow: hidden;
  width: 90%;
}

.editor {
  height: auto;
  min-height: 150px;
  width: 100%;
}
</style>
